<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 500px;
            border-radius: 10px;
            background-color: aqua;
            display: grid;
            place-items: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text">
        <button onclick="updata()" id="bottom">加一</button>
    </div>
</body>
</html>

<script>
    var box = document.getElementsByClassName("box")
    var bottom = document.getElementById("bottom")
    var ob = new MutationObserver(function(mutations){
        for (const mutation of mutations) {
            console.log("‘加一’del")
            console.log("box[0]改变了颜色")
        }
    })
    ob.observe(box[0],{
        childList: true, //监听dom新增和删除
        attributes: true,//监听dom的变化 比如大小 颜色
        characterData: true
    })
    setTimeout(()=>{
        bottom.remove()
        box[0].style.backgroundColor = "red"
    },5000)
</script>